<template>
	<view class="app-container">
		<view class="title">
			<u-icon class="back-icon" name="arrow-left" size="40" @click="goBack"></u-icon>
			<Title>热门歌单</Title>
			<u-button type="primary" shape="circle" size="medium">
				<u-icon name="play-right" color="#fff" size="28" style="margin-right: 6px"></u-icon>
				全部播放
			</u-button>
		</view>
		<text class="info">来自QQ音乐官方歌单</text>
		<view class="tag-list">
			<text :class="{ 'active': activeIndex == -1 }" @click="activeIndex = -1">全部</text>
			<text v-for="item in 10" :class="{ 'active': activeIndex == item }" @click="activeIndex = item"
				:key="item">华语</text>
		</view>
		<view class="item-list">
			<view class="item" v-for="i in 32" :key="i" @click="showDetil">
				<view class="img-view">
					<img src="@/assets/img/allsongsheet.jpg" />
					<text class="num">
						<u-icon size="30" name="kefu-ermai">
						</u-icon>
						36.5万
					</text>
				</view>
				<text class="title">剪辑常用的动漫神曲</text>
				<text class="sub-title">橄榄古典音乐</text>
			</view>
		</view>
		<view class="playControl">
			<PlayControl />
		</view>
	</view>
</template>

<script>
	import PlayControl from './components/playControler'
	export default {
		components: {
			PlayControl
		},
		data() {
			return {
				activeIndex: 0
			}
		},
		methods: {
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			showDetil() {
				console.log('显示更多')
				uni.navigateTo({
					url: '/pages/music/songSheet?type=123'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../assets/css/index-list.scss';

	.app-container {
		.title {
			display: flex;
			align-items: center;
			.back-icon{
				margin-right: 10px;
				margin-top: 2px;
				color: #555;
			}

			.u-btn {
				margin-left: 20px;
				width: 120px;
			}
		}

		.info {
			font-size: 14px;
			color: #999;
		}

		.tag-list {
			margin: 20px 0;
			display: flex;
			flex-wrap: wrap;

			text {
				width: 12%;
				cursor: pointer;
				display: inline-block;
				height: 34px;
				line-height: 34px;
				// font-weight: bold;
				color: #444;
				background-color: #efefef;
				text-align: center;
				margin-right: 20px;
				margin-bottom: 10px;
				font-size: 15px;
				border-radius: 4px;

				&.active {
					color: #1dc493;
					background-color: #f1f7f4;
				}
			}
		}

		.item-list {
			.item {
				width: 10%;
				margin-right: 30px;
			}
		}
	}
</style>
